<!--
 * @Author: pgz285 1272160626@qq.com
 * @Date: 2022-09-07 14:32:53
 * @LastEditors: pgz285 1272160626@qq.com
 * @LastEditTime: 2022-09-08 11:12:19
 * @FilePath: /element-admin/src/views/Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard">
    <div class="top">
      <div class="hd space-between hor-center">
        <div class="hor-center row slgap2">
          <img class="menu" src="@/assets/svg/menu.svg" alt="" @click="changeMenu()"/>
          <img src="@/assets/svg/logo.svg" class="title"/>
        </div>
        <div class="h-right hor-center slgap3 ">
          <img class="notice" src="@/assets/svg/notice.svg" alt="">
          <div class="right row">
            <User/>
          </div>
        </div>

      </div>
    </div>
    <div class="space-between">
      <div class="left">
        <Menu :showMore="showMore"/>
      </div>
      <!-- <TabMenu /> -->
      <div class="full">
        <Main/>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import User from '../components/user.vue';
import Menu from '../components/Menu.vue';
// import TabMenu from '../components/TabMenu.vue';
import Main from '../components/Main.vue';

export default {
  name: 'Dashboard',
  components: {
    User, Menu,
    Main
    //  TabMenu,
  },
  data() {
    return {
      showMore: true
    }
  },
  mounted() {
    console.log(this.$store.state)
  },
  methods: {
    changeMenu() {
      this.showMore = !this.showMore
    }
  }
}
</script>

<style scoped>
.top {
  width: 100%;
  height: 80px;
  padding: 18px 29px;
  background: #202741;
}

.menu {
  cursor: pointer;
}

.title {
  width: 197.65px;
  height: 21.57px;
}

.notice {
  cursor: pointer;
  padding-right: 32px;
  border-right: #4d546a 1px solid;
  object-fit: cover;
}

.left {
  height: calc(100vh - 80px);
  display: block;
  position: relative;
  background-color: rgb(32, 34, 42) !important;
}

.full {
  width: 100%;
}
</style>
